<template>
  <view
    v-if="show"
    class="fu-overlay"
    :class="{ 'fu-overlay--transparent': transparent }"
    :style="{ 
      zIndex,
      backgroundColor: customColor
    }"
    @click="onClick"
    @touchmove.prevent="() => {}"
  >
    <slot></slot>
  </view>
</template>

<script>
/**
 * fu-overlay 遮罩层组件
 * @description 创建一个遮罩层，用于强调特定的页面元素
 * @property {Boolean} show - 是否显示遮罩层
 * @property {Number} zIndex - 遮罩层层级
 * @property {String} customColor - 自定义背景色
 * @property {Boolean} transparent - 是否透明
 * @event {Function} click - 点击遮罩层时触发
 */
export default {
  name: 'fu-overlay',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    customColor: {
      type: String,
      default: ''
    },
    transparent: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  methods: {
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fu-fade-in 0.3s both;
  
  &--transparent {
    background-color: transparent;
  }
}

@keyframes fu-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style> 